/*
 * @Author       : 邱狮杰
 * @Date         : 2021-05-18 10:59:08
 * @LastEditTime : 2021-05-20 17:04:52
 * @FilePath     : /wedding-dress-selection/src/page/category/index.tsx
 * @Description  :
 */

import { FC, CSSProperties, useContext, useState } from 'react'
import { Skeleton } from 'antd'
import recommend from '../../assets/recommend.png'
import { Canceler } from 'axios'
// import suit from '../../assets/suit.png'
// import wedding from '../../assets/WeddingDress.png'
// import full from '../../assets/fullDress.png'
// import chinese from '../../assets/chineseStyle.png'
// import shose from '../../assets/WeddingShoes.png'
import { useGetOpenid } from '../../hook/index'
import { useMounted, useCannelRef, useUnload } from '../../hook/index'
import { SynchronizationAwaitError } from '../../utils/index'
import { BaseRequest } from '../../http/index'
import { useHistory } from 'react-router-dom'
import { CreateCategoryContext, useContextCategoryContextType, useTitleContextType, CreateTitle } from '../../reducer/index'
import './index.scss'

type Props = {}

interface CategoryListConf {
  id: number
  src: string
  title: string
  desc?: string
  style?: CSSProperties
}

const Category: FC<Props> = () => {
  const { CategoryDispatch } = useContext(CreateCategoryContext) as useContextCategoryContextType
  const { titleDispatch } = useContext(CreateTitle) as useTitleContextType
  const [CategoryList, setCategoryList] = useState<CategoryListConf[]>([])
  const refCannel = useCannelRef()
  let cannel: Canceler | null = null
  const his = useHistory()
  useGetOpenid(() => {})
  useMounted(async () => {
    const [err, res] = await SynchronizationAwaitError(
      BaseRequest({
        url: '/invitation-category',
        cancelToken: new refCannel.current(function (c) {
          cannel = c
        }),
      }),
      e => {
        const valueList = Object.values(e.data.data)
        const keyList = Object.keys(e.data.data)
        return keyList.map((keyItem, keyIndex) => {
          if (!keyIndex) return { id: keyItem, src: recommend, title: valueList[keyIndex], style: { marginTop: '0px' } }
          return { id: keyItem, src: recommend, title: valueList[keyIndex] }
        })
      }
    )
    if (!err) setCategoryList(res as unknown as CategoryListConf[])
  })
  useUnload(() => {
    // 取消请求
    if (cannel) cannel()
  })
  return (
    <div className='category'>
      <div className='title'>选择您想挑选的品类</div>
      {!CategoryList.length && <Skeleton />}
      <div className='list'>
        {CategoryList.map((item, index) => {
          return (
            <div
              style={item.style}
              onClick={() => {
                CategoryDispatch({ type: 'reset', data: { id: item.id } })
                titleDispatch({ type: 'reset', data: { name: item.title } })
                his.push('/main')
              }}
              key={index}
              className='listItem'>
              <img src={item.src} alt='category' />
              <div className='listItemBottom'>
                <h2 style={{ color: 'white' }}>{item.title}</h2>
                <span>{item.desc}</span>
              </div>
            </div>
          )
        })}
      </div>
    </div>
  )
}
export default Category
